<template>
  <base-layout>
    <div class="settings-container">
      <h1>设置</h1>
      <a-card class="settings-card">
        <a-form :model="formState" layout="vertical">
          <h2>个人信息</h2>
          <a-form-item label="用户名" name="username">
            <a-input v-model:value="formState.username" />
          </a-form-item>
          
          <a-form-item label="邮箱" name="email">
            <a-input v-model:value="formState.email" />
          </a-form-item>
          
          <h2 class="mt-4">安全设置</h2>
          <a-form-item label="修改密码" name="password">
            <a-input-password v-model:value="formState.password" placeholder="输入新密码" />
          </a-form-item>
          
          <a-form-item label="确认密码" name="confirmPassword">
            <a-input-password v-model:value="formState.confirmPassword" placeholder="再次输入新密码" />
          </a-form-item>
          
          <a-form-item>
            <a-button type="primary" @click="onSubmit">保存更改</a-button>
          </a-form-item>
        </a-form>
      </a-card>
    </div>
  </base-layout>
</template>

<script setup>
import { reactive } from 'vue'
import { message } from 'ant-design-vue'
import BaseLayout from '@/components/layout/BaseLayout.vue'

const formState = reactive({
  username: '',
  email: '',
  password: '',
  confirmPassword: ''
})

const onSubmit = () => {
  if (formState.password !== formState.confirmPassword) {
    message.error('两次输入的密码不一致')
    return
  }
  // TODO: 实现保存逻辑
  message.success('设置已保存')
}
</script>

<style scoped>
.settings-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

.settings-card {
  margin-top: 20px;
}

h1 {
  text-align: center;
  margin-bottom: 30px;
}

h2 {
  margin-bottom: 20px;
}

.mt-4 {
  margin-top: 24px;
}
</style> 